<template>
    <div class="askQuesDialing">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="问题标题" prop="problemTitle">
                <el-input v-model.trim="ruleForm.problemTitle"></el-input>
            </el-form-item>
            <el-form-item label="问题描述" prop="problemInfo" class="set-mh-300">
                <quill-editor
                    :options="editorOption"
                    v-if="reFresh"
                    ref="QuillEditor"
                    style="height: 200px;"
                    @blur="onEditorBlur($event)"
                    @change="onEditorChange($event)">
                </quill-editor>
            </el-form-item>
            <div class="ask-btn">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">取消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Prop,
    Emit,
    Component
} from 'nuxt-property-decorator'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import {raiseQuestions} from '~/api/community/quan/index'

@Component({
    name: 'askQuestion',
    components: {}
})
// 导出默认类PageTest扩展Vue
export default class PageAskQuestion extends Vue {
    ruleForm: any = {
        problemTitle: '',
        problemInfo: '',
        topicId: '',
        userId: this.$store.state.userinfo.id
    }
    rules: object = {
        problemTitle: [
            {required: true, message: '请填写问题标题', trigger: 'blur'}
        ],
        problemInfo: [
            {required: true, message: '请填写问题描述', trigger: 'blur'}
        ]
    }
    editorOption: object = {}
    reFresh: boolean = true
    reFreshNum: number = 0
    @Watch('reFreshNum')
    watchReFreshNumChange () {
        this.reFresh = false
        this.$nextTick(() => {
            this.reFresh = true
        })
    }
    // computed
    get editor () {
        return (this.$refs.QuillEditor as any).quill
    }
    onEditorChange ({html}: any) {
        this.ruleForm.problemInfo = html
    }
    onEditorBlur () {
        this.validateFieldInput('problemInfo')
    }
    validateFieldInput (key: String) {
        try {
            (this.$refs.ruleForm as any).validateField(key)
        } catch (e) {
            console.log('validateFieldInput [ validateField ] with valid prop string!')
        }
    }
    submitForm () {
        (this.$refs.ruleForm as any).validate((valid: any) => {
            this.ruleForm.topicId = this.currentTopicId
            if (valid) {
                this.addTopicFn()
            } else {
                return false
            }
        })
    }
    async addTopicFn () {
        const {data}: any = await raiseQuestions(this.ruleForm)
        if (data.code >= 0) {
            this.$message.success('操作成功')
            this.reFreshNum = Math.floor(Math.random() * (50 - 1 + 1) + 1)
            this.closeFn()
        }
    }
    resetForm () {
        (this.$refs.ruleForm as any).resetFields()
        this.reFreshNum = Math.floor(Math.random() * (50 - 1 + 1) + 1)
        this.closeFn()
    }
    @Emit('callBackCloseDialing') callBackCloseDialingFn (closeStatus: any) {}
    closeFn () {
        const closeStatus: Boolean = false
        this.callBackCloseDialingFn(closeStatus)
    }
    @Prop({
        type: Number
    }) currentTopicId !: any
    // mounted
    mounted () {
    }
}
</script>

<style lang="scss">
    .askQuesDialing{
        height: 500px;
        .set-mh-300{
            height: 300px;
            position: relative;
            .el-form-item__error{
                position: absolute;
                top: 300px!important;
            }
        }
        .ask-btn{
            text-align: right;
        }
    }
</style>
